<template>
  <div >
      <div class="home">
      <h3>我是非父子组件</h3>
      <button @click="emit()">{{this.tt}}</button>
      <button @click="chan()">更改样式</button>
      <button @click="ee()">隐藏</button>
      <button @click="ww()">显示</button>
      </div>
  </div>
</template>

<script>
// @ is an alias to /src

import VueEvent from '../../VueEvent.js'
export default {
  name: 'home',
  data (){
    return {
      tt:'给其它组件传播数据',
      msg:'非父子组件传值'
    }
  },
  components: {
  
  },
  mounted() {
    console.log(22)
      VueEvent.$on('ss',function(data){
         
       })
    // debugger
    VueEvent.$on('about',(msg)=>{
     
      console.log(msg,'msg')
    this.tt=msg;
    console.log(this.tt,'data')
    });
  },
  methods: {
    emit(){
      VueEvent.$emit('to-hello',this.msg)
    },
    
    chan(){
      
       this.VueEvent.$on('rr',function(data){
       console.log(typeof(data))
      })
    },
    ee(){
     
    },
    ww(){

    }
  },
}
</script>
<style lang="scss">
  .home{
    position:absolute;
    width:400px;
    height:320px;
    margin-left:885px;
    margin-top:90px;
    // margin-top:100px;
    background-color:red;
    // height:100px;
  }
</style>